<template>
  <div class="recent-list">
    <ul>
      <li v-for="(item) in data.recommend" :key="item.id" class="recommend">
        <router-link :to="`/article/${item.id}?section=2`">
          <div>
            <img :src="$store.state.imgPath+item.img">
          </div>
          <div class="info">
            <h3>{{item.book}}</h3>
            <p>{{item.author}}</p>
            <p>{{item.summary}}</p>
          </div>
          <i></i>
        </router-link>
      </li>
      <li v-for="(nearitem) in data.near" :key="nearitem.id">
        <router-link :to="`/article/${nearitem.id}?section=${nearitem.sectionId}`">
          <div>
            <img :src="$store.state.imgPath+nearitem.img">
          </div>
          <div class="info">
            <h3>{{nearitem.book}}</h3>
            <p>阅读进度：{{nearitem.section}}</p>
            <p>{{nearitem.summary}}</p>
          </div>
          <i></i>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props:{
    data:Object
  }
}
</script>

<style scoped>
.recent-list>ul>li img{
  width: 76px;
  height: 100px;
  margin-right: 10px;
  border-radius: 4px;
}
.recent-list>ul>li{
  margin-left: 15px;
  position: relative;
  border-bottom: 1px solid #ddd;
}
.recent-list>ul>li:last-child{
  border:0;
}
.recent-list>ul>li>a{
  display: flex;
  padding: 15px 0;
  font-size: 12px;
}
.recent-list>ul>li .info{
  overflow: hidden;
  padding-right: 10px;
}
.recommend i{
  display: block;
  position: absolute;
  top:0;
  right: 0;
  width: 42PX;
  height: 42PX;
  background: url('~@/assets/img/recommend.png') no-repeat -3PX -3PX;
}

.recent-list .info>p{
  margin-bottom: 10px;
  color: #aaa;
}
.recent-list .info>p:first-of-type{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-list .info>p:last-of-type{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.recent-list .info>h3{
  margin-bottom: 10px;
  font-weight: normal;
  font-size: 15px;
}
</style>